import { trendAlarm } from "@/api/modules/iot/alarm";
import moment from "moment";
import TrendDevice from "./trendDevice";
import TrendHandle from "./trendHandle";
import TrendLevel from "./trendLevel";
import TrendNumber from "./trendNumber";
import executed from "@/assets/images/executed.png";
import nonExecute from "@/assets/images/nonExecute.png";
export default defineComponent({
	setup() {
		onMounted(() => {
			init();
		});
		const init = async () => {
			let { result } = await trendAlarm({
				type: "",
				timeStamp: `${moment().add("-1", "d").format("YYYY-MM-DD 00:00:00")}~${moment().format("YYYY-MM-DD 23:59:59")}`
			});
			let data: any = result || {};
			state.tadayAlarm = data[moment().format("YYYY-MM-DD")];
			state.yesterdayAlarm = data[moment().add("-1", "d").format("YYYY-MM-DD")];
		};
		const state = reactive({
			tadayAlarm: { executed: 0, nonExecute: 0 },
			yesterdayAlarm: { executed: 0, nonExecute: 0 }
		});
		return () => {
			return (
				<div class="real-alarm-page ">
					<div class="flex">
						<div class="bg-white p-6 w-full">
							<div class="page-title flex">
								<div class="title-left-line"></div>今日告警
							</div>
							<div class="card-bg grid grid-cols-2 mt-4">
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={nonExecute} class="left-icon mr-4"></el-image>
										<div class="text-sm">未处理</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.tadayAlarm.nonExecute}</div>
								</div>
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={executed} class="left-icon mr-4"></el-image>
										<div class="text-sm">已处理</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.tadayAlarm.executed}</div>
								</div>
							</div>
						</div>
						<div class="bg-white p-6 w-full">
							<div class="page-title flex">
								<div class="title-left-line"></div>昨日告警
							</div>
							<div class="card-bg grid grid-cols-2 mt-4">
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={nonExecute} class="left-icon mr-4"></el-image>
										<div class="text-sm">未处理</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.yesterdayAlarm.nonExecute}</div>
								</div>
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={executed} class="left-icon mr-4"></el-image>
										<div class="text-sm">已处理</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.yesterdayAlarm.executed}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="grid grid-cols-2 gap-6 mt-4">
						<TrendDevice class="w-full"></TrendDevice>
						<TrendLevel class="w-full"></TrendLevel>
						<TrendNumber class="w-full"></TrendNumber>
						<TrendHandle class="w-full"></TrendHandle>
					</div>
				</div>
			);
		};
	}
});
